<template>
  <div>
    <div class="home-top">
      <img
        class="home-img"
        src="https://image.java.crmeb.net/crmebimage/public/operation/2021/09/23/aa6e46fd9fbd424e8cb636a34db50176nj0e4r0f6o.png"
        alt=""
      >
      <form class="from-search">
        <van-search
          v-model="value"
          placeholder="搜索商品"
          class="van-search"
        />
      </form>
    </div>
    <div class="lunbotu">
      <van-swipe :autoplay="3000">
        <van-swipe-item
          v-for="(image, index) in images"
          :key="index"
        >
          <img
            v-lazy="image.pic"
            class="aaa"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="lunList">
      <img
        src="https://image.java.crmeb.net/crmebimage/change/new_header/new_header4.png"
        alt=""
      >
      <div id="box">
        <ul
          id="con1"
          ref="con1"
          :class="{anim:animate==true}"
        >
          <li
            v-for='item in items'
            :key="item.id"
          >{{item.info}}</li>
        </ul>
      </div>

    </div>

  </div>

</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      value: '',
      images: [],
      animate: false,
      items: []
    }
  },
  methods: {
    async getLunbo() {
      const res = await this.$http.getLunbo()
      console.log(res.data.data.roll);
      this.images = res.data.data.banner
      this.items = res.data.data.roll

    },
    scroll() {
      this.animate = true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.items.push(this.items[0]);  // 将数组的第一个元素添加到数组的
        this.items.shift();               //删除数组的第一个元素
        this.animate = false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 1000)
    }

  },
  created() {
    this.getLunbo()
    setInterval(this.scroll, 1000)
  }
}
</script>
<style lang="scss">
.home-top {
  width: 100%;
  height: 60px;
  background-color: skyblue;
  display: flex;
  .home-img {
    height: 30px;
    margin: 15px;
  }
  .van-search {
    width: 240px;
    height: 40px;
    border-radius: 50px;
    margin-top: 10px;
  }
}
.lunbotu {
  width: 100%;
  height: 180px;
  background-color: skyblue;
  img {
    width: 90%;
  }
}
.aaa {
  width: 90%;
  height: 180px;
  margin-left: 20px;
}
.lunList {
  width: 90%;
  height: 40px;
  background-color: #fff;
  margin: auto;
  img {
    height: 20px;
    margin-top: 10px;
  }
}
#con1 {
  width: 200px;
  height: 40px;
  overflow: hidden;
  line-height: 40px;
}
.lunList {
  display: flex;
  justify-content: space-between;
  background-color: #ccc;
}
</style>